<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" >
<html>
<head>
<title>Xul.fr - Demonstration of CSS Tab Panel</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script src="tabs.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="tabs.css" />
<style>

body
{ 
    margin: 48px; 
    font-size:100%;
    font-family: arial, sans;
    background-color: #FFF;
}

.legal
{
    text-align:center;
    font-size: 80%;
    color: #666;
}

</style>

<script type="text/javascript">

function addListItem( listID, fieldID )
{
 var theList = document.getElementById( listID ),
     theField = document.getElementById( fieldID ),
     newItem;
 
 if( theList && theField && /\S/.test( theField.value ) )
 {
  newItem = theList.appendChild( document.createElement( 'li' ) );    
  newItem.appendChild( document.createTextNode( theField.value ) ); 
 }
 
 delete newItem; 
}

</script>


</head>


<body>
<div id="content">

<h1>Xul.fr - Demonstration of CSS Tab Panel</h1>

<p>The simplest Tab Panel in  CSS, with  JavaScript only to load content in the same page. <br />
The No Script tab is an example that does not use JavaScript and replace this page by another. </p>


<div id="tabs">
<ul id="tabPane">
     <li><a href="#" rel="tab-css.html" class="selected"  onclick="loadit(this)">CSS</a></li>
     <li><a href="#" rel="tab-dom.html" onClick="loadit(this)">DOM</a></li>
     <li><a href="#" rel="tab-javascript.html" onClick="loadit(this)">JavaScript</a></li>
     <li><a href="tab-noscript.html">No Script</a></li>
     
</ul>
<iframe id="container"></iframe>
</div>

<input type='button' id='addBtn' value="Add LI" onclick="addListItem( 'myUl', 'liText' )" >

<p><br>
  Return to the  tutorial: <a href="tabs.php" target="_parent">Tab Panel without  framework</a>.<br>
</p>
<div class="legal">(c) 2009 <a href="http://www.xul.fr/javascript/" target="_parent" >Xul.fr</a>. 
      All rights reserved. <br />
Permission is granted to print this page and the code of the scripts and 
      to use freely the code.<br />
Don't display this page and the code on another website.</div>
    
</div>
</body>
</html>
